<template>
  <cc-dialog
    v-model="dialogVisible"
    @submit="submit"
    :title="$t('dilogTitle.add')"
    width="520px"
  >
    <div class="dialog-content">
      <el-form size="large" label-width="100px">
        <el-form-item :label="$t('label.userName')">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('label.unitType')">
          <select-list-unit v-model="form.unitType" />
        </el-form-item>
        <el-form-item :label="$t('label.unitName')">
          <el-input v-model="form.unitName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('label.profession')">
          <select-list-profession v-model="form.profession" />
        </el-form-item>
      </el-form>
    </div>
  </cc-dialog>
</template>
<script setup>
import { CcDialog } from "@/components";
import { ref, reactive } from "vue";
import {
  SelectListUnit,
  SelectListProfession,
} from "@/components/select-banner";
import { dataMiddleGroundBaseUserUpdateUser } from "@/api/data-middleground-base/base/user";
import { useDialogEvent } from "@/composables/dialog";
const form = reactive({
  userId: "",
  userName: "",
  unitType: "",
  unitName: "",
  profession: "",
});

const { dialogVisible, submit, show } = useDialogEvent(
  dataMiddleGroundBaseUserUpdateUser,
  form,
);
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
:deep(.el-form) {
  .el-input__inner {
    border: none;
    background: #f2f3f5;
  }
}
.dialog-content {
  padding-right: 20px;
}
</style>
